<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>活动列表</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/show/css/font.css">
    <link rel="stylesheet" href="/show/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/show/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/show/js/xadmin.js"></script>

</head>
<body>
<br>
<div class="layui-input-inline">
    <form class="layui-form" action="/activity/activitySearch" method="post">
        <div class="demoTable">
            <span style="font-size: 15px">搜索:&nbsp;&nbsp;&nbsp;</span>
            <div class="layui-input-inline">
            <span >
                <select id="searchKey" layui-filter="key" name="searchKey">
                    <option value>--请选择--</option>
                    <option th:if="${list.searchKey} eq activityId" value="activityId" selected>节目编号</option>
                    <option th:if="${list.searchKey} ne activityId" value="activityId" >节目编号</option>

                    <option th:if="${list.searchKey} eq activityName" value="activityName" selected>表演节目名</option>
                    <option th:if="${list.searchKey} ne activityName" value="activityName" >表演节目名</option>

                    <option th:if="${list.searchKey} eq activityAddr" value="activityAddr" selected>所属区域</option>
                    <option th:if="${list.searchKey} ne activityAddr" value="activityAddr" >所属区域</option>

                    <option th:if="${list.searchKey} eq activityArea" value="activityArea" selected>表演地点</option>
                    <option th:if="${list.searchKey} ne activityArea" value="activityArea">表演地点</option>

                    <option th:if="${list.searchKey} eq dayTime" value="dayTime" selected>表演场次</option>
                    <option th:if="${list.searchKey} ne dayTime" value="dayTime">表演场次</option>

                    <option th:if="${list.searchKey} eq activityStatus" value="activityStatus" selected>节目状态</option>
                    <option th:if="${list.searchKey} ne activityStatus" value="activityStatus">节目状态</option>
                </select>
            </span>
            </div>
            <div class="layui-input-inline">
            <span>
                <input type="text" class="layui-input" name="searchValue" id="searchValue" autocomplete="off"
                       placeholder="输入关键字" th:value="${list.searchValue}">
            </span>
            </div>
            <button class="layui-btn" data-type="reload" lay-filter="search" lay-submit="">搜索</button>
        </div>
    </form>
</div>
<div class="layui-input-inline" style="float: right">
    <form class="layui-form" action="/activity/activityExcel" method="post">
        <input type="hidden" name="searchKey" th:value="${list.searchKey}">
        <input type="hidden" name="searchValue" th:value="${list.searchValue}">
        <span>
            <button class="layui-btn " type="submit"><i class="layui-icon"></i>excel导出</button>
        </span>
    </form>
</div>
<hr>
<button class="layui-btn" onclick="add()" type="button"><i class="layui-icon"></i>新活动</button>
<button class="layui-btn" type="button" id="delMany" onclick="delMany()"><i class="layui-icon">&#xe640;</i>批量删除</button>
<hr>
<div>
    <span style="font-size: 25px">搜索结果</span>
</div>
<hr>
<table class="layui-table" id="planTable">
    <thead>
    <tr>
        <th class="th-check">
            <input type="checkbox" lay-skin="success" name="selectAll"></input>
        </th>
        <th>节目编号</th>
        <th>表演节目名</th>
        <th>表演地点</th>
        <th>所属区域
<!--
            <span>所属区域</span>
            <span><button class="layui-btn-mini layui-icon"><i class="layui-icon">&#xe619;</i></button></span>
-->
        </th>
        <th>表演场次</th>
        <th>节目状态</th>
        <th>操作</th>
    </thead>

    <tbody>
    <tr th:each="act:${list.activityList}" id="tr-act">
        <td class="td-check" >
            <input type="checkbox" lay-skin="success" name="checkbox" th:activityId="${act.activityId}" >
        </td>
        <td name="td-id" th:text="${act.activityId}"></td>
        <td th:text="${act.activityName}"></td>
        <td th:text="${act.activityArea}"></td>
        <td th:text="${act.activityAddr}"></td>

        <td class="td-time" th:if="${act.dayTime==1}">
            白天场
        </td>
        <td class="td-time" th:if="${act.dayTime==2}">
            夜间场
        </td>

        <td class="td-status" th:if="${act.activityStatus==1}">
            <span class="layui-btn layui-btn-normal layui-btn-mini">启用</span>
        </td>
        <td class="td-status" th:if="${act.activityStatus==0}">
            <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">停用</span>
        </td>

        <td class="td-manage" th:if="${act.activityStatus==1}">
            <a onclick="member_stop(this,'10001')" href="javascript:;" title="启用">
                <i class="layui-icon">&#xe601;</i>
            </a>
            <a title="编辑"  onclick="update(this)" href="javascript:;">
                <i class="layui-icon">&#xe642;</i>
            </a>
            <a title="删除" onclick="del(this)" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
            </a>
        </td>
        <td class="td-manage" th:if="${act.activityStatus==0}">
            <a onclick="member_stop(this,'10001')" href="javascript:;"  title="停用">
                <i class="layui-icon">&#xe601;</i>
            </a>
            <a title="编辑"  onclick="update(this)" href="javascript:;">
                <i class="layui-icon">&#xe642;</i>
            </a>
            <a title="删除" onclick="del(this)" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
            </a>
        </td>
    </tr>
    </tbody>
</table>
<div class="page">
    <div>
        <a class="prev" th:href="@{/activity/activitySearch(page=${list.prePage},searchKey=${list.searchKey},searchValue=${list.searchValue})}">&lt;&lt;</a>
        <a class="num" th:href="@{/activity/activitySearch(searchKey=${list.searchKey},searchValue=${list.searchValue})}">首页</a>
        <span class="current" th:text="${list.curPage}"></span>
        <a class="num" th:href="@{/activity/activitySearch(page=${list.totalPage},searchKey=${list.searchKey},searchValue=${list.searchValue})}">尾页</a>
        <a class="next" th:href="@{/activity/activitySearch(page=${list.nextPage},searchKey=${list.searchKey},searchValue=${list.searchValue})}">&gt;&gt;</a>
    </div>
</div>
<script>

    //活动增加
    function add() {
        //访问新增页面地址
        var url = '/activity/activity';
        x_admin_show('新节目',url);
    }

    //活动编辑
    function update(obj) {
        //访问编辑页面地址
        var activityId = $(obj).parents("tr").find("td").eq(1).text();
        var url = '/activity/update?activityId='+activityId;
        x_admin_show('编辑节目',url);
    }


    //全选
    $('input:checkbox[name="selectAll"]').click(function(){
        if($(this).is(':checked')){
            $('input:checkbox').each(function(){
                $(this).prop("checked",true);
            });
        }else{
            $('input:checkbox').each(function(){
                $(this).prop("checked",false);
            });
        }
    });

    //批量删除
    function delMany() {
        var ids = '';
        $('[name=checkbox]').each(function () {
            if (this.checked == true) {
                ids += $(this).attr("activityId") + ',';
            }
        });
        if (ids){
            layer.confirm('是否删除已选定内容', function(index){
                $.ajax({
                    url: "/activity/delMany",
                    async: false,
                    type: "POST",
                    dataType: "json",
                    data: {"ids":ids},
                    success: function (data) {
                        if (data.info=="success"){
                            layer.msg("删除成功",{icon: 2,time:1000});
                            //刷新
                            window.location.replace("/activity/activityList")
                        }else {
                            layer.msg(data.info,{icon: 2,time:1000});
                        }
                    }
                })
            });
        }else {
            layer.msg("请选择删除内容",{icon: 7,time:1000});//7
        }
    }

    //单个活动删除
    function del(obj) {
        //访问删除页面地址
        var url = '/activity/del';
        var activityId =$(obj).parents("tr").find("td").eq(1).text();
        var activityName =$(obj).parents("tr").find("td").eq(2).text();
        layer.confirm('是否删除 '+activityName+' 节目?', function(index){
            $.ajax({
                url: url,
                async: false,
                type: "POST",
                dataType: "json",
                data: {"activityId":activityId},
                success: function (data) {
                    if (data.info=="success"){
                        layer.close(index);
                        //刷新
                        window.location.replace("/activity/activityList")
                    }else {
                        layer.msg('删除失败!',{icon: 5,time:1000});
                    }
                }
            })
        });
    }



    function member_stop(obj,id){
        //用户停用启用
        //更改按钮样式
        layer.confirm('确认要更改状态吗？',function(index){
            var activityId =$(obj).parents("tr").find("td").eq(1).text();
            if($(obj).attr('title')=='启用'){
                //发异步把用户状态进行更改
                $.ajax({
                    url: "/activity/activityStatus",
                    async: false,
                    type: "POST",
                    dataType: "json",
                    data: {
                        "activityId":activityId,
                        "activityStatus":0
                    },
                    success: function (data) {
                        //放入了map中，调用info
                        if (data.info == "success") {
                            $(obj).attr('title','停用')
                            $(obj).find('i').html('&#xe62f;');
                            $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('停用');
                            layer.msg('已停用!',{icon: 5,time:1000});
                        }else {
                            layer.msg('停用失败!',{icon: 1,time:1000});
                        }
                    }
                })

            }else {
                $.ajax({
                    url: "/activity/activityStatus",
                    async: false,
                    type: "POST",
                    dataType: "json",
                    data: {
                        "activityId": activityId,
                        "activityStatus": 1
                    },
                    success: function (data) {
                        //放入了map中，调用info
                        if (data.info == "success") {
                            $(obj).attr('title', '启用')
                            $(obj).find('i').html('&#xe601;');
                            $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('启用');
                            layer.msg('已启用!', {icon: 6, time: 1000});
                        } else {
                            layer.msg('启用失败!', {icon: 1, time: 1000});
                        }
                    }
                });
            }
        })
    }
</script>

</body>
</html>